<template #content>
  <div class="status-list">
    <div
      v-for="item in BUG_STATUS_CONFIG"
      :key="item.value"
      class="status-item"
      :class="{ 'is-active': bug.status === item.value }"
      @click="bug.status !== item.value && handleStatusChange(item.value)"
    >
      <component :is="item.icon" :style="{ color: item.color }" />
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<div class="info-item">
  <component
    :is="BUG_STATUS_CONFIG[bug.status]?.icon || BUG_STATUS_CONFIG.PENDING.icon"
    class="info-icon"
    :size="32"
    :style="{ color: BUG_STATUS_CONFIG[bug.status]?.color || BUG_STATUS_CONFIG.PENDING.color }"
  />
  <div class="info-content">
    <a-tag :color="BUG_STATUS_CONFIG[bug.status]?.color || BUG_STATUS_CONFIG.PENDING.color">
      {{ BUG_STATUS_CONFIG[bug.status]?.label || BUG_STATUS_CONFIG.PENDING.label }}
    </a-tag>
    <span class="info-label">状态</span>
  </div>
</div>

const handleStatusChange = async (status: number) => {
  // 重置更新请求对象,只保留必要参数
  updateBugRequest.value = {
    id: bug.value.id,
    status: status,
    mileId: -1,
    iterId: -1
  }

  try {
    const res: any = await updateBugUsingPut(updateBugRequest.value)
    if (res.code === 0) {
      await getBugData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
} 